<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { loginService } from "@/service/login";
import { useToast } from "wot-design-uni";
import { setTenantId } from "@/utils/auth";
import { useToastStore, useUserStore } from "@/store";
import Spin from "@/components/Spin/index.vue";
import ViewContainer from "@/layouts/ViewContainer.vue";

const userStore = useUserStore();

const isSelectOpen = ref(false);

const loading = ref<boolean>(false);

const toast = useToast();

const formRef = ref(null);
const formState = reactive({
	tenant: null,
	// email: "1808966946@qq.com",
	email: "",
	// password: "chenzuhai",
	password: ""
});

// 租户select
const tenantOptions = ref([]);

const listenEmailChanged = () => {
	formState.tenant = null;
};

// 根据用户名 获取租户列表
const handleToFetchTenantList = async (e) => {
	isSelectOpen.value = false;
	loading.value = true;
	try {
		const rs = await loginService.getTenantListByEmail(formState.email);
		console.log(rs);
		if (rs && rs.length > 0) {
			tenantOptions.value = rs.map((item) => ({
				label: item.name,
				value: item.id,
			}));
		} else {
			toast.warning({ msg: "该邮箱下暂无租户", duration: 1500 });
			tenantOptions.value = [{ label: null, value: null }];
		}
	} catch (error) {
		console.log(error);
	} finally {
		isSelectOpen.value = true;
		loading.value = false;
	}
};

const handleSubmit = async () => {
	loading.value = true;
	try {
		const rs = await formRef.value?.validate();
		if (!rs.valid) {
			loading.value = false;
			return;
		}
		setTenantId(formState.tenant);

		userStore.login({
			email: formState.email,
			password: formState.password,
			callback: () => {
				toast.success({ msg: "登录成功", duration: 1000 });

				setTimeout(() => {
					uni.reLaunch({ url: "/pages/index/index" });
				}, 1000);
			},
			callbackError: (msg) => {
				loading.value = false;
				// toast.error({ msg: msg || "登录失败", duration: 1000 });
			}
		});

	} catch (error) {
		console.log(error);
		loading.value = false;
	} finally {
		// loading.value = false;
	}
};
</script>

<template>
	<ViewContainer :title="null" class="login-form-container">
		<Spin :loading="loading">
			<wd-form ref="formRef" :model="formState">
				<view :style="{ position: 'relative' }">
					<wd-picker :columns="tenantOptions" prop="tenant" label="租户" v-model="formState.tenant"
						:rules="[{ required: true, message: '请选择租户' }]" @open="handleToFetchTenantList" />
				</view>

				<wd-input label="邮箱" prop="email" clearable v-model="formState.email" placeholder="请输入邮箱"
					:rules="[{ required: true, message: '请输入邮箱' }]" @input="listenEmailChanged" />

				<wd-input label="密码" show-password prop="password" clearable v-model="formState.password"
					placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]" />

				<view class="footer">
					<wd-button type="primary" :round="false" size="large" @click="handleSubmit" block>登录</wd-button>
				</view>
			</wd-form>
		</Spin>
	</ViewContainer>

	<wd-toast></wd-toast>
</template>
